<template>
    <div class="config-box">
        <div class="config-title">
            <span>SMTP</span>
        </div>
        <div class="config-content">
            <div class="config-list">
                <div class="list-item" v-for="item in emailList" :key="item.id">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SNMP",
    data() {
        return {
            form: this.$form.createForm(this),
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 17 }
            },
            checked: true,
            emailList: [],
        }
    },
    methods: {
        onChange(checked) {
            console.log(checked);
        },
    }

}
</script>
<style scoped>
.config-box {
    position: relative;
    border: 1px solid #eee;
    width: 380px;
    height: 400px;
    margin-right: 20px;
    box-shadow: 0 0 8px .5px rgba(0, 0, 0, 0.1);
}

.config-box:hover {
    box-shadow: 0 0 8px .5px rgba(0, 0, 0, 0.2);
    transition: all .3s;
}

.config-title {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #333333;
}

.config-content {
    height: 280px;
    overflow: hidden;
}

.config-content:hover {
    overflow-y: auto;
    overflow-x: hidden;
}

.config-foot-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.config-list {
    height: 280px;
    overflow-y: hidden;
}

.config-list:hover {
    overflow-y: auto;
}

.list-item {
    padding: 8px 10px;
    margin-bottom: 10px;
    background-color: rgb(247, 247, 247);
}

.list-item:hover {
    background-color: rgb(233, 233, 233);
}
</style>
